{% extends base %}

{% block head %}
<style type="text/css">
label {
    float: left;
    width: 80px;
    display: block;
}
.label-rest {
    float: left;
    width: calc(100% - 80px);
}
.create-tag {
    margin-bottom: 5px;
}
</style>
{% end %}

{% block body %}

{% include common/script/load_select2.html %}
{% init type = "md" %}
{% init heading = T("创建笔记") %}

<div class="card">
    {% include note/component/create_note_header.html %}
</div>

<div class="card">
    <form class="create-form">
        <div class="input-group-row">
            <label>{{T("标题")}}</label> 
            <input type="text" class="mid-text" name="name" value="{{name}}"/>
        </div>

        <!-- 选择日期 -->
        <div class="input-group-row">
            <label>日期</label>
            <input name="date" id="selectDate" autocomplete="off" class="create-input"/>
        </div>
        
        <div class="input-group-row">
            <label>{{T("类型")}}</label>
            <select class="note-type-select" name="type" value="{{type}}">
                {% for item in NOTE_TYPE_LIST %}
                    {% if item.visible %}
                        <option value="{{item.type}}">{{T(item.name)}}</option>
                    {% end %}
                {% end %}
            </select>
        </div>

        <div class="input-group-row group-select-box">
            <label>{{T("笔记本")}}</label>
            <select name="parent_id" value="{{parent_id}}">
                {%for opt_group in opt_groups %}
                    <optgroup label="{{opt_group.label}}">
                        {% for item in opt_group.children %}
                            <option value="{{item.id}}">{{item.name}}</option>
                        {% end %}
                    </optgroup>
                {% end %}
            </select>
        </div>

        <div class="tag-box"></div>

        <div class="row top-offset-1">
            <label>&nbsp;</label>
            <input type="button" class="btn mid-text create-btn" value="{{T("创建")}}">
        </div>
    </form>
</div>

<script type="text/template" id="tag-template">
{{! if tagList.length > 0 }}
    <div class="input-group-row">
        <label>标签</label>
        {{! each tagList tag }}
            <a class="tag lightgray large create-tag">{{! tag.tag_name }}</a>
        {{!/each}}
    </div>
{{!/if}}
</script>

<script type="text/javascript" src="{{_server_home}}/_static/lib/layDate-v5.0.9/laydate.js"></script>
<script type="text/javascript">
    function getWeekDayFromLayDate(layDate) {
        var date = new Date(layDate.year, layDate.month-1, layDate.date);
        var wday = date.getDay();
        switch (wday) {
            case 0: return "周日";
            case 1: return "周一";
            case 2: return "周二";
            case 3: return "周三";
            case 4: return "周四";
            case 5: return "周五";
            case 6: return "周六";
        }
    }

    laydate.render({
        elem: '#selectDate',
        value: new Date(),
        format: "yyyy.MM.dd",
        done: function(value, date, endDate) {
            //得到日期生成的值，如：2017-08-18
            console.log(value); 
            //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(date); 
            //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            console.log(endDate); 

            $("input[name=name]").val(value + getWeekDayFromLayDate(date));
        }
    });

    $(function () {
        var groupSelectBox = $(".group-select-box");
        var noteTypeSelect = $(".note-type-select");
        var createBtn = $(".create-btn");
        var createForm = $(".create-form");

        function reloadTags() {
            var groupId = $("[name=parent_id]").val();
            var params = {
                "tag_type": "note",
                "group_id": groupId
            }
            xnote.http.get("/note/tag/list", params, function (resp) {
                if (resp.code != "success") {
                    xnote.alert(resp.message);
                } else {
                    var html = $("#tag-template").render({
                        tagList: resp.data
                    });
                    $(".tag-box").html(html);
                }
            })
        }

        function reloadPage(type) {
            var oldHref = window.location.href;
            var selectedType = noteTypeSelect.val();
            if (type == "group") {
                groupSelectBox.hide();
            } else {
                groupSelectBox.show();
            }
            reloadTags();
        }

        function getTagsText() {
            var tagList = [];
            $(".tag-box").find(".tag.active").each(function (index, ele) {
                tagList.push($(ele).text());
            });
            return tagList.join(" ");
        }

        noteTypeSelect.change(function (e) {
            reloadPage();
        });
        groupSelectBox.change(function (e) {
            reloadPage();
        });

        createBtn.click(function (e) {
            var params = createForm.formData();
            params._format = "json";
            params.tags = getTagsText();

            xnote.http.post("/note/create", params, function (resp) {
                console.log("create resp:", resp);
                if (resp.success) {
                    window.location.href = resp.data.url;
                } else {
                    xnote.alert(resp.message);
                }
            }).fail(function (err) {
                xnote.alert(err);
            });
        });

        $("body").on("click", ".tag", function (e) {
            $(e.target).toggleClass("active");
        });

        reloadPage();
    })
</script>

{% end %}

{% block body_right %}
    {% include note/component/sidebar/group_list_sidebar.html %}
{% end %}
